<template>
  <div class="virtualList-box" ref="virtualListBoxEl" @scroll="handleScroll">
    <div class="virtualList timeline" ref="virtualListEl">
      <div
        class="timeline-item"
        :id="new Date(item.time).getTime()"
        v-for="item in currentData"
        :style="{ transform: `translateY(${offsetY}px)` }"
      >
        <div class="timeline-icon">
          <span class="badge"></span>
        </div>
        <div class="timeline-content">
          <div class="card-newHead">
            <div class="timeline-value">{{ item.time }}</div>
          </div>
          <div class="card">
            <div class="card-body">
              <p>应用：QQ</p>
              <p>动作：收藏：林稀稀(2453396885)</p>
              <p id="button">
                内容：
                [网页]>标题:人不如狗？它们被明星宠上天，有女星花7万买狗袋;Url:https://view.inews.qq.com/q/WXN20170109004672071?refer=mobileqq&cur_pos=0&_wv=1&_rp=1&bkt=0&qq=2453396885&rs=0;内容:腾讯娱乐专稿（文/简秋）天后蔡依林饲养比熊犬“屋虎”多年，感情之深不言而喻，日前...;.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  defineProps,
  watch,
  nextTick,
  defineExpose,
} from "vue";
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  showNumber: {
    type: number,
    default: 15,
  },
});
const height = 154;
let allData = [];
let currentData = ref([]);
let offsetY = ref(0);
let virtualListEl = ref(null);
let virtualListBoxEl = ref();
// virtualList.addEventListener('scroll',(e)=>{
//     console.log(virtualList)
// })

function handleScroll(e) {
  const hideNumber = Math.floor(e.target.scrollTop / height);
  currentData.value = allData.slice(hideNumber, props.showNumber + hideNumber);
  offsetY.value = hideNumber * height;
}
function setData(data) {
  allData = data;
  currentData.value = allData.slice(0, props.showNumber);
  console.log(currentData.value);
  nextTick(() => {
    virtualListEl.value.style.height = allData.length * height + "px";
  });
}
function scrollToCenter(value) {
  const virtualListBoxElDom = virtualListBoxEl.value;
  const index = allData.findIndex((item) => item.time === value);
  console.dir(virtualListBoxElDom);
  virtualListBoxElDom.scrollTop =
    (index + 1) * height - virtualListBoxElDom.offsetHeight / 2 - height / 2;

  currentData.value = allData.slice(index, index + props.showNumber);
  console.log(currentData.value);
}
onMounted(() => {
  console.log();
});
defineExpose({
  setData,
  scrollToCenter,
});
</script>
<style lang="scss" scoped>
.virtualList-box {
  flex: 1;
  height: 100vh;
  overflow-y: scroll;
}
.timeline .timeline-item {
  display: flex;
  position: relative;
}

.timeline .timeline-item::before {
  background: #dadee4;
  content: "";
  height: 100%;
  left: 10px;
  position: absolute;
  top: 20px;
  width: 2px;
  z-index: -1;
}
.timeline .timeline-item .timeline-icon .badge {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  padding: 0 5px;
  border-radius: 500px;
  vertical-align: middle;
  background: #1e87f0;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.timeline .timeline-item .timeline-content {
  // -ms-flex: 1 1 auto;
  width: 400px;
  padding: 0 0 0 1rem;
}
.card-title {
  font-size: 18px;
}
.card-newHead {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.card {
  background-color: #ffffff;
  .card-body {
    p {
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}

#tooltip {
  /* ... */
  display: none;
}

#tooltip[data-show] {
  display: block;
}
#tooltip {
  width: auto;
  max-width: 400px;
  background: #333;
  color: white;
  font-weight: bold;
  padding: 4px 8px;
  font-size: 13px;
  word-break: break-all;
  border-radius: 4px;
}
#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

#arrow {
  visibility: hidden;
}

#arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}
#tooltip[data-popper-placement^="top"] > #arrow {
  bottom: -4px;
}

#tooltip[data-popper-placement^="bottom"] > #arrow {
  top: -4px;
}

#tooltip[data-popper-placement^="left"] > #arrow {
  right: -4px;
}

#tooltip[data-popper-placement^="right"] > #arrow {
  left: -4px;
}
</style>
